<template>
  <div class="update-genter">
    <!-- 导航栏
    <van-nav-bar
        title="性别"
        left-text="取消"
        right-text="确认"
        @click-left="$emit('close')"
    /> -->

    <!-- 性别选择 -->
    <van-picker
        title="性别"
        show-toolbar
        :columns="columns"
        :default-index="value"
        @confirm="onConfirm"
        @cancel="$emit('close')"
    />
  </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'


export default {
    name: 'UpdateGenter',
    props: {
        value: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            columns: ['男', '女'],
        }
    },
    methods: {
        async onConfirm(value,index) {
            this.$toast.loading({
                message: '保存中...',
                duration: 0, // 持续展示 toast
                forbidClick: true // 禁用背景点击
            })
            try {
                await updateUserProfile({
                    gender: index
                })

                // 更新视图
                this.$emit('input', index)
                // 关闭弹出层
                this.$emit('close')
                // 成功提示
                this.$toast.success('修改性别成功')
            } catch (err) {
                this.$toast.fail('操作失败')
            }
        }
    }

}
</script>

<style scoped lang="less">

</style>